<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>
    <!-- 内容区域 -->
    <view class="payokcion">
      <view v-if="paystates">
        <image src="/sub_shop/static/images/payok.png" mode="" class="image"></image>
        <view style="text-align: center">支付成功</view>
      </view>
      <view v-else>
        <image src="/sub_shop/static/images/payfail.png" mode="" class="image"></image>
        <view style="text-align: center">支付失败</view>
      </view>
    </view>
    <!-- 支付按钮 -->
    <view class="orderdetail">查看订单详情</view>
    <view class="shophome" @click="goshophome">商城首页</view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
export default {
  components: {
    headerCom,
    footerCom
  },
  data() {
    return {
      paystates: false
    };
  },
  methods: {
    goshophome() {
      uni.navigateTo({
        url: '/sub_shop/shophome/shophome'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .payokcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 98rpx;
    image {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 30rpx;
    }
  }
  .orderdetail {
    width: 640rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #f12b2b;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    border: 2rpx solid #f12525;
    margin: 102rpx 55rpx 40rpx 55rpx;
  }
  .shophome {
    width: 640rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    margin: 0 55rpx;
  }
}
</style>
